<template>
  <div>
    <el-tooltip v-bind="props" :disabled="disabled">
      <div
        ref="textRef"
        class="overflow-text truncate"
        :style="{ textOverflow: overfloType }"
      >
        {{ content }}
      </div>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { useEventListener } from "@vueuse/core";
import { useTooltipContentProps, type Placement } from "element-plus";
import type { PropType } from "vue";

const props = defineProps({
  ...useTooltipContentProps,
  teleported: {
    type: Boolean,
    default: false,
  },
  placement: {
    type: String as PropType<Placement>,
    default: "top",
  },
  overfloType: {
    type: String as PropType<"ellipsis" | "unset" | "clip">,
    default: "ellipsis",
  },
});
const textRef = shallowRef<HTMLElement>();
const disabled = ref(false);

useEventListener(textRef, "mouseenter", () => {
  if (textRef.value?.scrollWidth! > textRef.value?.offsetWidth!) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
});
</script>

<style></style>
